<template>
  <div :class="[ 'chart-card', isCircle ? 'flex' : '', choosen && choosen.includes(data.type) ? 'active' : '' ]">
    <div :class="[ isCircle ? 'left' : '' ]">
      <div class="card-header">
        <span class="title">{{ data.title }}</span>
        <span class="tool" v-if="hasChoose">
          <a-checkbox :checked="choosen.includes(data.type)" @change="onChange"></a-checkbox>
        </span>
      </div>
      <div class="card-body">
        <a-statistic v-if="!isCircle" :precision="data.precision || 0" :value="data.count" :valueStyle="valueStyle" />
        <div class="footer">
          <div class="item">
            <span class="label">{{ firstStr }}</span>
            <div>
              <span :class="['value', data.firstUp && 'red', data.firstDown && 'green']">{{ data.firstValue || '-' }}</span>
              <span class="icon">
                <img v-if="data.firstUp" src="~@images/dataPanel/icon_increase.png" >
                <img v-if="data.firstDown" src="~@images/dataPanel/icon_fall.png" >
              </span>
            </div>
          </div>
          <div class="item">
            <span class="label">{{ secondStr }}</span>
            <div>
              <span :class="['value', data.secondUp && 'red', data.secondDown && 'green']">{{ data.secondValue || '-' }}</span>
              <span class="icon">
                <img v-if="data.secondUp" src="~@images/dataPanel/icon_increase.png" >
                <img v-if="data.secondDown" src="~@images/dataPanel/icon_fall.png" >
              </span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="right" v-if="isCircle">
      <a-progress type="circle" :percent="data.count" :width="100" />
    </div>
  </div>
</template>

<script>
export default {
  props: {
    dateType: { // 日期类型
      type: Number,
      default: 1
    },
    hasChoose: { // 是否可选
      type: Boolean,
      default: true
    },
    isCircle: { // 是否环状图
      type: Boolean,
      default: false
    },
    choosen: { // 选中集合
      type: Array,
      default: () => {}
    },
    data: { // 数据
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      valueStyle: {
        fontSize: '32px',
        lineHeight: '46px',
        height: '52px'
      },
      firstStr: '较前一日',
      secondStr: '较上周同期'
    };
  },
  watch: {
    dateType: {
      handler(val, oldVal){
        switch (val) {
          case 1:
            this.firstStr = '较前一日'
            this.secondStr = '较上周同期'
            break;
          case 2:
            this.firstStr = '较前一周'
            this.secondStr = '较去年同期'
            break;
          case 3:
            this.firstStr = '较前一月'
            this.secondStr = '较去年同期'
            break;
          case 4:
            this.firstStr = '较前一季度'
            this.secondStr = '较去年同期'
            break;
          default:
            this.firstStr = '较前一日'
            this.secondStr = '较上周同期'
            break;
        }
      },
      deep:true //true 深度监听
    }
  },
  created() {},
  mounted() {},
  methods: {
    onChange(e) {
      let res = {
        type: this.data.type,
        value: e.target.checked
      }
      this.$emit('submit', res)
    }
  }
};
</script>

<style lang="less"></style>
